<template>
	<view class="phxx-item">
		<view class="phxx-item-content">
			<view class="top">
				<!-- <view class="cph">{{ itemList.waybillNo }}</view> -->
				<view class="cph">{{ itemList.vehicleNo }}</view>
				<view :class="{'red-status': itemList.waybillStatus == 40020,
					 'green-status': itemList.waybillStatus == 90000,'status': true}">
					 {{ itemList.waybillStatusName }}</view>
			</view>
			<view class="center">
				<view class="gs">{{ itemList.customerName }}</view>
				<view class="mz">{{ itemList.coalSubtypeName }}</view>
			</view>
			<view class="bottom">
				<!-- <view class="items">
					<text class="til">车牌号</text>
					<text class="val">{{ itemList.vehicleNo }} {{ itemList.driverMobile }}</text>
				</view> -->
				<view class="items">
					<text class="til">司机姓名:</text>
					<text class="val">{{ itemList.driverName }}</text>
				</view>
				<view class="items">
					<text class="til">装货地:</text>
					<text class="val">{{ itemList.loadingSiteName }}</text>
				</view>
				<view class="items">
					<text class="til">接单时间:</text>
					<text class="val">{{ parseTime(itemList.createTime) }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	driverName: 'way-bill-item',
	props: {
		itemList: {
			type: Object,
			default: {
				waybillNo: '',
				driverName: '',
				waybillStatusName: '',
				vehicleNo: '',
				customerName: '',
				loadingSiteName: '',
				coalSubtypeName: '',
				driverName: '',
				driverMobile: '',
				waybillStatusName: '',
				createTime: ''
			}
		}
	},
	data() {
		return {};
	},
	methods: {
		handleClick(item, type) {
			console.log(item);
			this.$emit('manualClick', item, type);
		},
		parseTime(time, pattern) {
			if (arguments.length === 0 || !time) {
				return null;
			}
			const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}';
			let date;
			if (typeof time === 'object') {
				date = time;
			} else {
				if (typeof time === 'string' && /^[0-9]+$/.test(time)) {
					time = parseInt(time);
				} else if (typeof time === 'string') {
					time = time
						.replace(new RegExp(/-/gm), '/')
						.replace('T', ' ')
						.replace(new RegExp(/\.[\d]{3}/gm), '');
				}
				if (typeof time === 'number' && time.toString().length === 10) {
					time = time * 1000;
				}
				date = new Date(time);
			}
			const formatObj = {
				y: date.getFullYear(),
				m: date.getMonth() + 1,
				d: date.getDate(),
				h: date.getHours(),
				i: date.getMinutes(),
				s: date.getSeconds(),
				a: date.getDay()
			};
			const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
				let value = formatObj[key];
				// Note: getDay() returns 0 on Sunday
				if (key === 'a') {
					return ['日', '一', '二', '三', '四', '五', '六'][value];
				}
				if (result.length > 0 && value < 10) {
					value = '0' + value;
				}
				return value || 0;
			});
			return time_str;
		}
	}
};
</script>

<style lang="scss" scoped>
.phxx-item {
	width: 700rpx;
	padding: 30rpx;
	box-sizing: border-box;
	margin: 0 auto 20rpx;
	border-radius: 20rpx;
	background: #fff;
	font-size: 15px;
	color: #000;
	.phxx-item-content {
		width: 644rpx;
		.top {
			width: 100%;
			border-bottom: 1rpx solid #e6e6e6;
			position: relative;
			padding: 20rpx 8rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.cph {
				font-size: 18px;
				font-weight: 700;
			}
			.name {
				font-weight: 700;
			}
			.status {
			    color: #fff;
				font-size: 14px;
			    padding: 0 20rpx;
			    text-align: center;
			    border-radius: 10rpx;
			    background: #ff9900;
			    display: block;
			    height: 29px;
			    line-height: 29px;
			}
			.red-status{
				background: #FC1A0C!important;
			}
			.green-status{
				background: #37A134!important;
			}
		}
		.center {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			padding: 20rpx 5rpx;
			.gs{
				margin-right: 30rpx;
				font-size: 16px;
			}
			.gs,
			.mz,
			.location {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				width: 50%;
			}
		}
		.bottom{
			padding: 10rpx 0 0 0;
			> .items{
				padding-bottom: 10rpx;
			}
			.til {
				width: 152rpx;
				display: inline-block;
			}
			.val {
				margin-left: 30rpx;
			}
		}
	}
}
</style>
